Redesigning the product page for an odour neutralising brand to increase users' understanding of what the products do, how they behave and what they can be used for.
The redesigned product page
The Problem
The first edition of the OCD website presented a new line of products to the market. It allowed users to navigate all of the product types and fragrances on offer intuitively and allowed them to order a free sample of the fragrances.
Before: The old product page
However, user testing showed that the site failed to explain what the different product types meant to those who had not come across similar products before. Users complained that they found it difficult to picture how the products on site would look and behave when in their hands, which inhibited their understanding of the product's benefits. This reduced the number of users ordering samples as they didn’t understand what it was they were ordering nor why it would benefit them.
My Role
As the sole UI/UX Designer at NPK Media, I led the design and handover of the first iteration of the site. To explore why sample order numbers were lower than we had hoped, I set up a Hotjar funnel and screen recordings of the product and sample pages on the site as well as conducting face to face user testing. I organised and conducted all user testing and was responsible for the redesign, including writing copy and creating visual content such as images and renders. I collaborated with the developer to understand the technical constraints of the redesign and the project manager to understand time and budget constraints.
Aim
Increase users' understanding of the odour neutralising products offered by OCD by bridging the gap between what they saw on screen and what they would see, feel and smell when experiencing the products in person.
Goals
1. Bridge the gap between the digital representation and physical product.
2. Make information about the different product types easier for users to discover.
3. Integrate the brands playful and self aware identity.
4. Maintain the ease of navigation between the product types and fragrances.
Bridging the digital / physical gap
Images of the products on the site were the only way for users to get an idea of what the products would be like in person. The images were photorealistic renderings of the product packaging. This was designed to help users of the site identify the product if they were looking for it in a shop.
Before: the old product images
However, user testing highlighted that these images failed to show what the cube and gel inside the packaging looked like. 5 out of 10 users in testing mentioned a frustration with these images:
“Are there other images of what it actually is?”
“Is that it?”
Asking why:
“I just want to see what’s inside”
“I don’t know what the actual product looks like”
“How big is it? I don’t know how big that is”
The lack of images of the products themselves proved to be an obvious oversight in hindsight and the testing illustrated this.
I began by using photos of each product to try and depict the textures, but when adding them onto the prototype I found too much variation between scene lighting conditions as well as framing, scale and composition issues.
Instead I used Photoshop to recreate the ‘Gel’ and ‘Cube’ textures digitally before putting them onto 3D models in Dimension. This allowed me to tweak the parameters of each material to highlight the jelly-like wetness of the gel and the powdery feel to the cube, while maintaining consistent lighting conditions and composition.
After: The new product images
The product lineup consisted of 5 fragrances which were each available as a ‘Gel’, ‘Cube’ and ‘Spray’. The only exception to this was that OCD does not offer the ‘Original’ fragrance as a ‘Spray’. To illustrate this without breaking the format of the product page I framed a greyed out bottle as if it had been knocked over to bring this difference to the users attention.
The new spray bottle images, including the 'Original' fragrance which isn't available as a spray
Making the information easier to find
While information about what the product looked and felt like was available on the site, Hotjar screen recordings showed that 95% of users never found this information.
Hotjar findings
Before: Information was available in dialogue boxes that appeared when an active product type selector was clicked. An information icon (‘i’) faded in on the active selector to show users that they could find more information by clicking.
Before: The old way for users to find more information about each product type
In user testing sessions, 90% of users said that they didn’t even notice the icon appearing and the remaining 10% who did notice it said they didn’t know what it meant so didn’t try to click it. Furthermore, users wanted to know more about the products, they just couldn’t find it:
“What is the ‘Cube’?”
“Is the ‘Gel’ like hair gel?”
“What does ‘Original’ smell like?”
This information needed to be easier to find.
The information could not be included statically on the product page in its current form because:
1. It would disrupt the navigation between products which was still a high priority goal for the site
2. It risked cluttering the page with too much content and becoming lost
So, I prototyped several ways for users to discover the information more easily.
Because there were several different questions that users wanted answering, depending on which product variant was selected, I designed a set of buttons that asked those questions and included them below the images for each relevant product variant.
Because users had not noticed the fade in animation of the ‘i’ icon, I added a simple animation that translated the buttons up and down along with a change in opacity to highlight the state change.
After: The new way for users to find more information about product variants
The result
Testing the new design showed users now discovered the information 75% more often. All of the participants using the new prototype rated their understanding of the products on the site higher than those using the old prototype.
The new, redesigned product page
Moving forward
Unfortunately the project has been put on hold and so the new design is yet to go live on the site. Therefore, I do not yet have any information about how successful these changes have been in increasing the number of sample orders. However, I plan on collecting this data as soon as we get the green light to go live. The old design is still live on site:
What I learnt
The importance of factoring in resource constraints to design decisions. I would have liked to include an animation for each of the ‘Cube’ and ‘Gel’ variants depicting the lid screwing off and the contents pouring or falling out. However, I realised early that while this was on brand and would have been a special moment for users, spending time working out how to create these complex 3D animations was not within the budget and would have taken valuable time away from the more critical user experience design problems.
The importance of prioritising which problems to focus on. There are always things to improve with any user experience and the OCD site is no exception. I prioritised the product page as we found a lack of understanding, but testing has shown users also have problems with the ‘Order a Sample’ page which could contribute to the lower order numbers. However, because a Hotjar funnel showed a much larger proportion of drop offs on the ‘Product’ page compared to the ‘Order a Sample’ page, I prioritised this page for redesign.
